<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/libs/bootstrap/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/bootstrap-table/css/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/treegrid/jquery.treegrid.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/Ionicons/css/ionicons.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/markdown/simplemde.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/markdown/github-markdown.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/markdown/highlight.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/iCheck/minimal/blue.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/admin-common.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/examination.css}"/>
    <script th:src="@{/static/libs/jquery/jquery.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script th:src="@{/static/libs/pace/pace.js}"></script>
    <script th:src="@{/static/libs/jquery/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/static/libs/jquery/fastclick.min.js}"></script>
    <script th:src="@{/static/libs/validate/validate.js}"></script>
    <script th:src="@{/static/libs/layer/layer.js}"></script>
    <script th:src="@{/static/libs/bootstrap-table/js/bootstrap-table.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap-table/js/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{/static/libs/treegrid/jquery.treegrid.min.js}"></script>
    <script th:src="@{/static/libs/treegrid/jquery.treegrid.extension.js}"></script>
    <script th:src="@{/static/libs/treegrid/tree.table.js}"></script>
    <script th:src="@{/static/libs/upload/js/webuploader.js}"></script>
    <script th:src="@{/static/libs/upload/js/jax.uploader.js}"></script>
    <script th:src="@{/static/libs/upload/js/uploadCall.js}"></script>
    <script th:src="@{/static/libs/zplayer/js/zplayer.min.js}"></script>
    <script th:src="@{/static/libs/markdown/highlight.min.js}"></script>
    <script th:src="@{/static/libs/markdown/simplemde.min.js}"></script>
    <script th:src="@{/static/libs/iCheck/icheck.min.js}"></script>
    <script th:src="@{/static/js/inline-attachment.js}"></script>
    <script th:src="@{/static/js/codemirror.inline-attachment.js}"></script>
    <script th:src="@{/static/js/core.js}"></script>
    <script th:src="@{/static/js/FileSaver.js}"></script>
    <script th:src="@{/static/js/jquery.wordexport.js}"></script>

    <link rel="stylesheet" href="../../static/css/vendor/ion-fonts.css">
    <link rel="stylesheet" href="../../static/css/style.css">
    <link rel="stylesheet" href="../../static/test/ziy/common.css">
    <link rel="stylesheet" href="../../static/test/ziy/iconfont.css">
</head>
<meta charset="utf-8">
<body>

<div class="main-wrapper">

    <header class="header-main_area">
        <div class="header-top_area">
            <div class="container">
                <div class="row" style="height: 45px;">
                    <div class="col-lg-4">
                        <div class="ht-left_area in-header return" style="height: 44.67px;">
                            <a class="return" style="top: 5px;" href="../testpaper.html">
                                <span style="background:#fed100;color:#333333;">
                                        <i class="iconfont iconfanhui" style="color: black;"></i>
                                        <strong th:text="${session.course.name}">课堂名称</strong>
                                    </span>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="ht-right_area">
                            <div class="ht-menu">
                                <ul>
                                    <li><a href="#"></a></li>
                                    <li><a href=""></a></li>
                                    <li><a href="/user/personal"><i class="ion-person"></i>个人中心</a></li>
                                    <li><a href="/doLogout"><i class="ion-log-out"></i>退出用户</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

</div>
<div class="in-header" style="box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.04);background: none repeat scroll 0% 0% #fff;">

    <div class="nav gWidth row" id="third-nav" style="box-shadow: none">

        <div class="col-lg-12">
            <a href="../exams">考试列表</a>
            <!--/*@thymesVar id="id" type="com.hoyue.classroom.bean.Course"*/-->
            <a href="../questions" class="active">题目列表</a>


        </div>

    </div>
</div>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
        	<div class="form-group p-10">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="keywords">题名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="keywords">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="question">课程:</label>
                    <div class="col-xs-8">
                        <select class="form-control"id="courseId">
                            <option  value="">请选择</option>
                            <option th:each="course:${courses}" th:value="${course.id}" th:text="${course.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="question">题目类型:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="questionType">
                            <option  value="">请选择</option>
                            <option value="0">单项选择题</option>
                            <option value="1">多项选择题</option>
                            <option value="2">主观问答题</option>
                            <option value="3">编程题</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group p-10">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">状态:</label>
                    <div class="col-xs-8">
                        <select id="status" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">未考过题目</option>
                            <option value="1">已考过题目</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-8 col-sm-6">
                	<label class="control-label col-xs-4"></label>
                	<div class="col-xs-8">
	                	<shiro:hasRoles name="teacher">
	                    	<button type="button" id="btn_query" class="btn btn-primary pull-right">查 询</button>
	                    </shiro:hasRoles>
	                	<button type="button" id="btn_requery" class="btn btn-primary pull-right mr5">重 填</button>
                	</div>
                </div>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasRoles name="teacher">
            <button id="btn_add" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 自定义题目
            </button>
            </shiro:hasRoles>
            <!--<shiro:hasPermission name="question:importExcel">-->
            <!--<button id="btn_import_excel" type="button" class="btn btn-success" data-toggle="modal" data-target="#importExcelModal">-->
                <!--<span class="glyphicon glyphicon-print" aria-hidden="true"></span> 批量导入题库-->
            <!--</button>-->
            <!--</shiro:hasPermission>-->
            <shiro:hasRoles name="teacher">
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 批量删除
            </button>
            </shiro:hasRoles>
        </div>
        <table id="table" style="table-layout:fixed"></table>
    </div>
</section>

<!-- 导入Excel表模态框 -->
<!--<div id="importExcelModal" class="modal fade" tabindex="-1" role="dialog">-->
    <!--<div class="modal-dialog"  role="document">-->
        <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
                <!--<h4 class="modal-title">批量导入Excel表中题目到题库</h4>-->
            <!--</div>-->
            <!--<div class="modal-body">-->
            	<!--<form class="form-horizontal">-->
					<!--<div class="box-body">-->
	    				<!--<div class="form-group">-->
	                        <!--<label class="col-sm-3 control-label">Excel表格路径 :</label>-->
	                        <!--<div class="col-sm-8" style="position: relative">-->
	                            <!--<input type="text" class="form-control" id="excelUrl" placeholder="excel路径（文件大小不得超过2M）">-->
	                            <!--<div class="jax-upload-btn" style="position: absolute;right:20px;top: 0">-->
	                                <!--<i class="fa fa-cloud-upload upload-file-btn"></i>-->
	                            <!--</div>-->
	                       	<!--</div>-->
	                   	<!--</div>-->
	                   	<!--<div id="upload-content" class="upload-content form-group" style="padding-left:0">-->
	                   		<!--<label class="col-sm-3 control-label"></label>-->
	                   	<!--</div>-->
	          		<!--</div>-->
	          		<!--<div class="box-footer">-->
	              		<!--<div class="pull-right">-->
			                  <!--<button type="button" id="saveExcel" class="btn btn-success">确定</button>-->
			                  <!--<button type="button" data-dismiss="modal" class="btn btn-default">取消</button>-->
	              		<!--</div>-->
	          		<!--</div>-->
	          	<!--</form>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<script th:src="@{/static/libs/adminlte/js/app.js}"></script>
<script th:src="@{/static/libs/adminlte/js/settings-skins.js}"></script>
<script type="text/javascript">
    var columns = [
        {
            checkbox: true,

        },{
            field: 'title',
            title: '题名',
            width : '33%',
            cellStyle:{
           	css:{
           	"overflow": "hidden",
           	"text-overflow": "ellipsis",
           	"white-space": "nowrap",
           	"word-break": "keep-all",
        	"white-space": "nowrap",
           	}
            },
            //align : "center"
        },{
            field: 'course',
            title: '课程分类',
            align : "center",
            width : '12%',
            formatter: function (value) {
                return value.name;
            }
        }, {
            field: 'questionType',
            title: '题目类型',
            align : "center",
            width : '10%',
            formatter: function (questionType) {
                var questionTypeName = '';
                if(questionType == 0){
                	questionTypeName = '单项选择题';
                }else if(questionType == 1){
                   	questionTypeName = '多项选择题';
                }else if(questionType == 2){
                   	questionTypeName = '主观问答题';
                }else if(questionType == 3){
                   	questionTypeName = '编程题';
                }
                return questionTypeName;
            }
        },{
            field: 'score',
            title: '分值',
            align : "center",
            width : '10%',
        },{
            field: 'difficulty',
            title: '难度',
            align : "center",
            width : '10%',
            formatter : function(difficulty) {
                var diffHtml = '';
                if(difficulty == 1){
                	diffHtml = "★☆☆☆☆";
                }else if(difficulty == 2){
                	diffHtml = "★★☆☆☆";
                 }else if(difficulty == 3){
                	diffHtml = "★★★☆☆";
                 }else if(difficulty == 4){
                	diffHtml = "★★★★☆";
                 }else if(difficulty == 5){
                	diffHtml = "★★★★★";
                 }
                return diffHtml;
            }
        },{
            field: 'status',
            title: '状态',
            align : "center",
            width : '10%',
            formatter : function(value) {
            	if(status == 0){
             	   return statusName = '<span class="label label-success">未考过题目</span>';
                }else if(status == 1){
             	   return statusName = '<span class="label label-warning">已考过题目</span>';
                }
            }
        },{
            field : 'operation',
            title : '操作',
            align : "center",
            width : '15%',
            class:'min-width-100',
            formatter : function(value,
                                 row, index) {
                var edit = '<a class="btn btn-primary btn-sm" onclick="editQuestion('+row.id+')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑</a>' ;
                var del = '<a class="btn btn-danger btn-sm" onclick="deleteQuestion('+row.id+')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</a>' ;
                return edit + " " + del;
            }
        }];
    var options={
        id:"#table",
        url: '/question/list',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams : queryParams
    };
    Core.initTable(options);

    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            keywords : $("#keywords").val(),
            courseId : $("#courseId").val(),
            questionType : $("#questionType").val(),
            status : $("#status").val(),
        };
        return temp;
    }

    /*编辑*/
    function editQuestion(id) {
        window.location.href="/question/edit?id="+id
    }
    /*删除*/
    function deleteQuestion(id) {
        Core.confirm("确定删除该题目？",function () {
            Core.postAjax("/question/delete",{"id":id},function (data) {
                if(data.status==200){
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        })
    }

     $(function () {
   	    /*重填*/
        $("#btn_requery").click(function(){
        	$("#formSearch")[0].reset();
        });
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /*新增*/
        $("#btn_add").click(function(){
           location.href="question/add"
        });
        /*导入excel*/
        $("#btn_import_excel").click(function(){
            Core.clearError("#importExcelModal");
        });
       /*  刷新题库 */
        $("#saveExcel").click(function(){
        	if($("#excelUrl").val() != ""){
        		$("#importExcelModal").modal("hide");
                Core.refreshTable("#table");
        	}else{
        		layer.msg("请上传数据");
        	}
        })

        /*批量删除*/
        $("#btn_batch_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows){
                Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
                    var ids=[];
                    $.each(checkedRows, function (i, item) {
                        ids.push(item.id);
                    })
                    Core.postAjax("/question/batch/delete", {"ids": ids}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    })
                })
            }
        });
    });

     // $(function () {
     //     /*导入excel中数据*/
     //     $(".upload-file-btn").click(function(){
     //         if($("#upload-content").find(".upload-file-div").size()==0){
     //             var imgHtml = '<div class="col-md-8 upload-div upload-file-div">'+
     //                     '<div class="upload-item">'+
     //                     '<p class="upload-file"><i class="fa fa-folder-open fz-70"></i></p>'+
     //                     '<p class="upload-btns">'+
     //                     '<a type="button" class="btn btn-sm btn-block btn-success excelUploader">请选择Excel表格</a>'+
     //                     '</p>'+
     //                     '</div>'+
     //                     '</div>'
     //             $("#upload-content").append(imgHtml);
     //             $(".excelUploader").upload({
     //                 server : '[[@{/static/upload/importExcel}]]',
     //                 swf: '/img/Uploader.swf',
     //                 imgAccept:'xls,xlsx'
     //             }, function(url,picker) {
     //                 $("#excelUrl").val(url);
     //                 layer.msg("导入成功");
     //                 echoGtUploadResMethd(url,picker);
     //             });
     //         }
     //     })
     // })
    
</script>
</body>
</html>